<template>
  <div class="tree-wrap">
    <el-input
      placeholder="输入关键字"
      style="margin-top: 10px;"
      prefix-icon="el-icon-search"
      clearable
      @input="fnSearch"
      v-model="filterText"
    ></el-input>
    <div class="scroll-box">
      <div class="wrap">
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="datas"
          :props="defaultProps"
          node-key="id"
          :default-expanded-keys="[1]"
          :accordion="true"
          @node-click="handleNodeClick"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <div
              :class="{
                red: data.online == 0,
                green: data.online == 1,
                gray: data.online == -1,
              }"
            ></div>
            <span :title="data.label">{{ data.label }}</span>
          </span>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/utils/bus";
import { getData, postData } from "@/request/http";
export default {
  data() {
    return {
      filterText: "",
      data: [
        {
          id: 1,
          label: "部门1",
          children: [
            {
              id: 4,
              label: "摄像机1-内蒙",
            },
            {
              id: 11,
              label: "摄像机1-内蒙",
            },
          ],
        },
        {
          id: 2,
          label: "部门2",
          children: [
            {
              id: 5,
              label: "摄像机2-cctv1",
            },
            {
              id: 6,
              label: "摄像机3-香港",
            },
          ],
        },
        {
          id: 3,
          label: "部门3",
          children: [
            {
              id: 7,
              label: "摄像机4-cctv2",
            },
            {
              id: 8,
              label: "摄像机5-cctv5",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      datas: [],
      flag: 0,
      isFlag: false,
      resData: [],
      serchResult: [],
      arrResult: [],
    };
  },
  watch: {
    // filterText(val) {
    //   console.log(this.datas);
    //   //   this.getData(this.resData, this.datas, 0);
    //   this.$refs.tree.filter(val);
    // },
  },
  computed: {
    videoSelectedIndex() {
      return this.$store.state.cameraPlay.videoSelectedIndex;
    },
  },
  mounted() {
    this.datas = [];
    this.getList();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //click
    async handleNodeClick(data) {
      if (Array.isArray(data["children"]) && data["children"].length == 0) {
        if (this.videoSelectedIndex == -1) {
          this.$message.error("请先选择右侧模块");
          return;
        }
        //console.log(data)
        this.$store.commit("playTask/addTaskArr", data);
      }
    },

    //获取初始列表
    getList() {
      postData("/adminweb/admin/device/list/byorgtree/ext", {
        with_online: 1,
        bind_for: "ADMIN",
        bind_for_id: this.$store.state.login.username,
      })
        .then((res) => {
          // console.log(res);

          if (res.code == 0) {
            let data = res.datas.gfathers;
            this.resData = data;
            if (!data) {
              return;
            } else {
              this.getData(this.resData, this.datas, 0);
              this.serchResult = JSON.parse(JSON.stringify(this.datas));
            }
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {});
    },

    /* 
        搜索
    */
    fnSearch(val) {
      this.arrResult = [];
      this.filterResult(val, this.serchResult);
      this.datas = this.arrResult;
      if (val.trim().length == 0) {
        this.datas = this.serchResult;
      }
    },

    /* 
        计算数组,搜索
    */
    filterResult(val, arr) {
      if (Array.isArray(arr) && arr.length > 0 && !!val.trim()) {
        for (let i = 0; i < arr.length; i++) {
          let item = arr[i];
          if (item.label && item.label.search(val.toString()) != -1) {
            this.arrResult.push(item);
          }
          if (item.children) {
            this.filterResult(val, item.children);
          }
        }
      }
    },
    /*
      递归设置children   
    */
    getData(data, arr, index) {
      index++;
      if (Array.isArray(data) && data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          let item = data[i];
          let obj = {};
          obj["id"] = Math.floor(Math.random() * 10000000).toString();
          obj["sn"] = !item["sn"] ? item["org_id"] : item["sn"];
          obj["label"] =
            item.gfather_name ||
            item.father_name ||
            item.org_name ||
            item.alias;
          obj["reg_type"] = item["reg_type"];
          obj["index"] = index;
          obj["online"] = item["online"];
          //没有chns
          obj["children"] = [];
          //有chns
          if (!!item["chns"] && item["chns"] > 1) {
            let result = [];
            for (let h = 1; h <= item["chns"]; h++) {
              result.push({
                label: "通道 " + h,
                children: [],
                onlineType: item["online"],
                reg_type: item["reg_type"],
                index: 4,
                id: Math.floor(Math.random() * 10000000).toString(),
                sn: !item["sn"] ? item["org_id"] : item["sn"],
                chns: h - 1,
                parent_label: obj["label"],
              });
            }
            obj["children"] = result;
          }

          arr.push(obj);

          if (item["fathers"] && !item["chns"]) {
            this.getData(item["fathers"], obj["children"], index);
          } else if (item["orgs"] && !item["chns"]) {
            this.getData(item["orgs"], obj["children"], index);
          } else if (item["devices"] && !item["chns"]) {
            this.getData(item["devices"], obj["children"], index);
          }
        }
      }
    },
  },
};
</script>
<style scoped>
.tree-wrap {
  width: 100%;
  height: 100%;
  /* overflow-y: scroll; */
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  overflow: hidden;
}
.wrap {
  width: 100%;
  height: auto;
  overflow-y: hidden;
}
.scroll-box {
  width: 100%;
  height: calc(100% - 100px);
  overflow-x: hidden;
  overflow-y: auto;
}
.scroll-box::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
.scroll-box::-webkit-scrollbar-thumb {
  background: #4677d4;
  border-radius: 10px;
}

.tree-wrap >>> .el-tree {
  margin-top: 20px;
  /* background: #0e3361; */
  background: #031229;
  color: rgb(221 223 226);
  /* overflow-y: scroll; */
}
.tree-wrap >>> .el-input__inner {
  background: #092348;
  border: 1px solid #4676d4;
  color: rgb(221 223 226);
  height: 35px;
  line-height: 35px;
}
.tree-wrap >>> .el-tree-node:focus > .el-tree-node__content {
  background-color: #66b1ff87 !important;
}
.tree-wrap >>> .el-tree-node__content:hover {
  background-color: #66b1ff87;
}
.tree-wrap
  >>> .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #66b1ff87;
}
.tree-wrap >>> .happy-scroll-container {
  width: 100% !important;
  display: flex;
  flex-flow: column;
}
/* .tree-wrap >>> .el-tree-node__label{
padding-left:-10px!important;
} */
.tree-wrap >>> .el-tree-node__content {
  /* padding-left: 5px !important; */
}
.tree-wrap >>> .el-tree-node {
  position: relative;
}
.tree-wrap >>> .custom-tree-node {
  font-size: 14px;
  padding-right: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.red {
  /* color: red; */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f13636;
  margin-right: 10px;
}
.green {
  /* color: rgb(35, 235, 35); */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(35, 235, 35);
  margin-right: 10px;
}
.gray {
  /* color: rgb(107, 107, 101); */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #838486;
  margin-right: 10px;
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
